<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="/WEB-INF/template/menu-template.xhtml">s

    <ui:define name="metadata">
        <f:metadata>
            <f:viewAction action="#{userBean.initUserData()}"/>
        </f:metadata>
        <ui:param name="menuIndex" value="2" />
    </ui:define>

    <ui:define name="content">

        <div class="usersTable">
            <h:form id="usersTableForm">
                <p:dataTable id="usersTable" value="#{userBean.userList}" var="o"
                             styleClass="order-table"
                             headerClass="order-table-header"
                             rowClasses="order-table-odd-row,order-table-even-row"
                             rowIndexVar="rowIndex"
                        >

                    <p:column style="text-align: center">
                        <!-- column header -->
                        <f:facet name="header">Nr.</f:facet>
                        <!-- row record -->
                        #{rowIndex + 1}
                    </p:column>

                    <p:column style="text-align: center">
                        <!-- column header -->
                        <f:facet name="header">Name</f:facet>
                        <!-- row record -->
                        #{o.firstName}
                    </p:column>

                    <p:column style="text-align: center">
                        <!-- column header -->
                        <f:facet name="header">Edit</f:facet>
                        <!-- row record -->
                        <h:link value="Edit" outcome="edit">
                            <f:param name="id" value="#{o.id}"/>
                        </h:link>
                    </p:column>

                    <p:column style="text-align: center">
                        <!-- column header -->
                        <f:facet name="header">Delete</f:facet>
                        <!-- row record -->

                        <p:commandLink value="Delete" update=":usersTableForm:display"
                                       oncomplete="userDeleteDialog.show()">
                            <f:setPropertyActionListener value="#{o}" target="#{userBean.user}"/>
                        </p:commandLink>
                    </p:column>
                </p:dataTable>

                <p:dialog header="Delete Confirmation" widgetVar="userDeleteDialog" resizable="false" id="userDeleteDlg"
                          showEffect="fade" hideEffect="fade" modal="true">

                    <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
                        <h:outputText value="Are you sure you want to delete:"/>
                        <h:outputText value="#{userBean.user.firstName}"/>
                        <p:commandButton id="deleteButton" actionListener="#{userBean.removeUser(userBean.user)}"
                                         oncomplete="userDeleteDialog.hide()"
                                         update=":usersTableForm:usersTable" value="Delete"/>
                        <p:commandButton id="cancelButton" onclick="userDeleteDialog.hide()" value="Cancel"/>
                    </h:panelGrid>

                </p:dialog>
            </h:form>
            <br/>
            <p:button style="background: dodgerblue; color: white; font-family: Arial, Helvetica, Sans-Serif;" value="Create User" outcome="cp.xhtml"/>
        </div>

    </ui:define>
</ui:composition>